<script lang="ts" setup>
defineOptions({
  name: 'HomeModules',
})

interface ModuleItem {
  id: number
  name: string
  icon: string
  path: string
}

// 五个栏目图标数据
const moduleList = ref<ModuleItem[]>([
  {
    id: 1,
    name: '质量科普',
    icon: '/static/images/home/icon01.png',
    path: '/pages/quality/index',
  },
  {
    id: 2,
    name: '检测项点',
    icon: '/static/images/home/icon04.png',
    path: '/pages/detection/index',
  },
  {
    id: 3,
    name: '认证申请',
    icon: '/static/images/home/icon02.png',
    path: '/pages/certification/index',
  },
  {
    id: 4,
    name: '标准检索',
    icon: '/static/images/home/icon05.png',
    path: '/pages/search/index',
  },
  {
    id: 5,
    name: '我的收藏',
    icon: '/static/images/home/icon03.png',
    path: '/pages/favorites/index',
  },
])

// 栏目点击
function handleModuleClick(item: ModuleItem) {
  uni.navigateTo({
    url: item.path,
    fail: () => {
      uni.showToast({
        title: '页面跳转失败',
        icon: 'error',
      })
    },
  })
}
</script>

<template>
  <view class="bg-#F3F5F9 p-5">
    <view class="flex items-center justify-between">
      <view
        v-for="item in moduleList"
        :key="item.id"
        class="flex flex-col items-center p-2 transition-all duration-300 active:scale-95"
        @click="handleModuleClick(item)"
      >
        <image :src="item.icon" class="mb-2 h-8 w-8" />
        <text class="text-center text-xs text-gray-800 font-medium">
          {{ item.name }}
        </text>
      </view>
    </view>
  </view>
</template>
